<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!--适应移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>发布blog</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <!--<link rel="stylesheet" href="./static/js/me.js">-->
</head>
<body id="bg1">

<!--导航-->
<nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini fly m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">后台Management</h2>
            <a href="#" class="item m-mobile-hide m-item"><i class="home icon"></i>博客</a>
            <a href="#" class="item m-mobile-hide m-item"><i class="idea icon"></i>分类</a>
            <a href="#" class="item m-mobile-hide m-item"><i class="tags icon"></i>标签</a>

            <!--头像-->
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text"><img class="ui avatar image" src="../../static/img/1.png"> RYX</div>
                    <!--下拉框-->
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle  black icon button m-top-right m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>

<!--二级导航-->
<div class="ui attached menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/blogs/input}" class="active teal item">发布</a>
            <a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
        </div>

    </div>

</div>

<!--中间内容部分-->
<div class="m-container m-padded-tb-large">
    <div class="ui container">
        <form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" class="ui form" method="post">
            <input type="hidden" name="published">
            <input type="hidden" name="id" th:value="*{id}">
            <div class="required field" >
                <div class="ui left labeled input">
                    <div class="ui selection orange basic compact dropdown label" style="z-index: 999999999999!important;" >
                        <input type="hidden" value="原创" name="flag" th:value="*{flag}">
                        <i class="dropdown icon"></i>
                        <div class="text">原创</div>
                        <div class="menu">
                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                            <div class="item" data-value="转载">翻译</div>
                        </div>
                    </div>
                    <input type="text" title="" placeholder="标题" name="title" th:value="*{title}">
                </div>
            </div>

            <div class="two fields">
                <div class="required field">
                    <div class="ui left labeled action input" style="z-index: 99999999999!important;">
                        <div class="ui compact blue basic label">分类</div>
                        <div class="ui fluid selection dropdown">
                            <input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">
                            <i class="dropdown icon"></i>
                            <div class="default text">错误日志</div>
                            <div class="menu">
                                <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">
                                    错误日志
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="field">
                    <div class="ui left labeled action input" style="z-index: 99999999999!important;">
                        <div class="ui compact blue basic label">标签</div>
                        <div class="ui fluid selection multiple search  dropdown">
                            <input type="hidden" name="tagIds" th:value="*{tagIds}">
                            <i class="dropdown icon"></i>
                            <div class="default text">Java</div>
                            <div class="menu">
                                <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">java</div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <div class="required field">
                <div class="ui left labeled input">
                    <label class="ui teal basic label">首图</label>
                    <input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="首图引用地址">
                </div>
            </div>

            <!--发布内容填写处-->
            <div class="required field">
                <div id="md-content" >
                    <textarea placeholder="Content" name="content" style="display: none" th:text="*{content}"></textarea>
                </div>
            </div>

            <div class="required field">
                <textarea name="description" th:text="*{description}" placeholder="博客描述控制在85个汉字之内" maxlength="150"></textarea>
            </div>


            <div class="inline fields">
                <div class="field">
                    <div class="ui  checkbox">
                        <input type="checkbox" name="recommend" id="recommend" class="hidden" checked th:checked="*{recommend}" title="">
                        <label for="recommend"> 推荐</label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui  checkbox">
                        <input type="checkbox" name="shareStatement" id="shareStatement" th:checked="*{shareStatement}" class="hidden" title="">
                        <label for="shareStatement">转载声明 </label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui  checkbox">
                        <input type="checkbox" name="appreciation" id="appreciation" th:checked="*{appreciation}" class="hidden" title="">
                        <label for="appreciation"> 赞赏</label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui  checkbox">
                        <input type="checkbox" name="commentabled" id="commentabled" th:checked="*{commentabled}" class="hidden" title="">
                        <label for="commentabled"> 评论</label>
                    </div>
                </div>
            </div>

            <div class="ui error message"></div>

            <div class="ui right aligned container">
                <button class="ui orange button" type="button" onclick="window.history.go(-1)">Back</button>
                <button type="button" id="save-btn" class="ui orange button">Save</button>
                <button type="button" id="publish-btn" class="ui orange button">Release</button>
            </div>

        </form>

    </div>


</div>


<!--底部-->
<footer th:replace="admin/_fragments :: footer" class="ui inverted segment vertical m-padded-tb-massive">
    <div class="ui container center aligned">
        <div class="ui  inverted stackable divided grid">
            <div class="three wide column">
                <img src="../../static/img/Qr.jpg" class="ui rounded image" style="width: 110px;">
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新blog</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item ">My story </a>
                    <a href="#" class="item ">My story </a>
                    <a href="#" class="item ">My story </a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新blog</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item ">My story </a>
                    <a href="#" class="item ">My story </a>
                    <a href="#" class="item ">My story </a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新blog</h4>
                <p class="m-text-spaced m-opacity-mini">只要学不死，就往死里学，加油，噢利给！！！</p>
            </div>

        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini ">Copyright@2020-2021 Swim's Blog Designed by RYX</p>

    </div>
</footer>

<th:block th:replace="admin/_fragments :: script">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../../static/lib/editormd/editormd.min.js"></script>
</th:block>

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入blog标题'
                }]
            },
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '内容：不能为空'
                }]
            },
            typeId: {
                identifier: 'typeId',
                rules: [{
                    type: 'empty',
                    prompt: '分类：不能为空'
                }]
            },
            firstPicture: {
                identifier: 'firstPicture',
                rules: [{
                    type: 'empty',
                    prompt: '图片地址：不能为空'
                }]
            },
            description:{
                identifier: 'description',
                rules: [{
                    type: 'empty',
                    prompt: 'description: 不能为空'
                }]
            }

        }
    });

    $('#save-btn').click(function () {
        $('[name="published"]').val(false);
        $('#blog-form').submit();
    });

    $('#publish-btn').click(function () {
        $('[name="published"]').val(true);
        $('#blog-form').submit();
    });


    //markdown.js
    var contentEditor;

    $(function() {
        contentEditor = editormd("md-content", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            // path    : "../../static/lib/editormd/lib/"
            path    : "/lib/editormd/lib/"
        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */
    });


</script>

</body>
<script>

</script>
</html>